$font-path := './fonts/'

/* Color
-------------------------- */
$color-white := #FFFFFF;
$color-white-light := rgba(255, 255, 255, 0.65);
$color-white-light2 := rgba(255, 255, 255, 0.35);

$color-primary := #1089ff;
$color-primary-light1 := mix(#FFFFFF, $color-primary, 20%);
$color-primary-light2 := mix(#FFFFFF, $color-primary, 40%);
$color-primary-light3 := mix(#FFFFFF, $color-primary, 60%);
$color-primary-light4 := mix(#FFFFFF, $color-primary, 80%);
$color-primary-light5 := mix(#FFFFFF, $color-primary, 90%);
$color-primary-light6 := mix(#FFFFFF, $color-primary, 95%);
$color-primary-active := mix(#000000, $color-primary, 10%);

$color-success = #52c41a;
$color-success-light1 := mix(#FFFFFF, $color-success, 20%);
$color-success-light2 := mix(#FFFFFF, $color-success, 40%);
$color-success-light3 := mix(#FFFFFF, $color-success, 60%);
$color-success-light4 := mix(#FFFFFF, $color-success, 80%);
$color-success-light5 := mix(#FFFFFF, $color-success, 90%);
$color-success-light6 := mix(#FFFFFF, $color-success, 95%);
$color-success-active := mix(#000000, $color-success, 10%);

$color-info := #35495E;
$color-info-light1 := mix(#FFFFFF, $color-info, 20%);
$color-info-light2 := mix(#FFFFFF, $color-info, 40%);
$color-info-light3 := mix(#FFFFFF, $color-info, 60%);
$color-info-light4 := mix(#FFFFFF, $color-info, 80%);
$color-info-light5 := mix(#FFFFFF, $color-info, 90%);
$color-info-light6 := mix(#FFFFFF, $color-info, 95%);
$color-info-active := mix(#000000, $color-info, 10%);

$color-warning := #fea638;
$color-warning-light1 := mix(#FFFFFF, $color-warning, 20%);
$color-warning-light2 := mix(#FFFFFF, $color-warning, 40%);
$color-warning-light3 := mix(#FFFFFF, $color-warning, 60%);
$color-warning-light4 := mix(#FFFFFF, $color-warning, 80%);
$color-warning-light5 := mix(#FFFFFF, $color-warning, 90%);
$color-warning-light6 := mix(#FFFFFF, $color-warning, 95%);
$color-warning-active := mix(#000000, $color-warning, 10%);

$color-danger := #ff4d4f;
$color-danger-light1 := mix(#FFFFFF, $color-danger, 20%);
$color-danger-light2 := mix(#FFFFFF, $color-danger, 40%);
$color-danger-light3 := mix(#FFFFFF, $color-danger, 60%);
$color-danger-light4 := mix(#FFFFFF, $color-danger, 80%);
$color-danger-light5 := mix(#FFFFFF, $color-danger, 90%);
$color-danger-light6 := mix(#FFFFFF, $color-danger, 95%);
$color-danger-active := mix(#000000, $color-danger, 10%);

$dark-bg := #001529;

/* text-color
-------------------------- */
$color-text-primary := rgba(0, 0, 0, .85);
$color-text-default := rgba(0, 0, 0, .65);
$color-text-secondary := rgba(0, 0, 0, .45);
$color-text-disabled := rgba(0, 0, 0, .25);
$color-text-placeholder := #C0C4CC;
$btn-disable-color := #c5c8ce;
$color-text-regular:= #606266;
$color-icon-default:= $color-text-placeholder;
$color-icon-hover:= #909399;

/* bg-color
-------------------------- */
$color-bg-fa := #fafafa;
$color-select-hover := #f5f5f5;
$color-effect-shadow := alpha($color-primary, 0.08);
$color-input-shadow := alpha($color-primary, 0.2);
$color-input-error-shadow := alpha($color-danger, 0.2);

/* border
-------------------------- */
$border-color-base := #dcdfe6;
$border-color-light := #f0f0f0;
$border-base := 1px solid $border-color-base;
$border-base-light := 1px solid $border-color-light;
$border-table := 1px solid #e8eaec;
$border-table-color := #e8eaec;
$border-popper-color := #EBEEF5;

/* radius font-size
-------------------------- */
$border-base-radius := 2px;
$base-font-size := 14px;
$header-font-size := 16px;

/* height
-------------------------- */
$large-height := 36px;
$default-height := 32px;
$small-height := 28px;
$mini-height := 24px;
$base-line-height := 1.5715;

$animation-duration-slow := 0.3s;
$animation-duration-base := 0.2s;
$animation-duration-fast := 0.1s;

// 阴影
//阴影向下：主要应用于组件内部或组件本身，是比较常规场景的用法
//阴影向上：主要应用于底部导航或工具栏等
//阴影向左：主要应用于右边导航栏、抽屉组件或固定表格栏
//阴影向右：主要应用于左边导航栏、抽屉组件或固定表格栏
//第 1 层: 物体位于低层级，此时物体被操作(悬停、点击等)触发为悬浮状态，当操作完成或取消时，悬停状态反馈也跟随消失，物体回归到原有的层级中，如：卡片 hover 等；
$shadow-1-up := 0 -1px 2px -2px rgba(0, 0, 0, .16), 0 -3px 6px 0px rgba(0, 0, 0, 0.12), 0 -5px 12px 4px rgba(0, 0, 0, 0.09)
$shadow-1-down := 0px 1px 2px -2px rgba(0, 0, 0, .16), 0 3px 6px 0px rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09)
$shadow-1-left := -1px 0 2px -2px rgba(0, 0, 0, .16), -3px 0px 6px 0px rgba(0, 0, 0, 0.12), 5px 0px 12px 4px rgba(0, 0, 0, 0.09)
$shadow-1-right := 1px 0 2px -2px rgba(0, 0, 0, .16), 3px 0px 6px 0px rgba(0, 0, 0, 0.12), 5px, 0px 12px 4px rgba(0, 0, 0, 0.09)

// 第二层 物体位于中层级，此时物体与基准面的关系是展开并跟随，物体由地面上的元素展开产生，会跟随元素所在层级的移动而移动，如：下拉面板等；
$shadow-2-up := 0 -3px 6px -4px rgba(0, 0, 0, .12), 0 -6px 16px 0px rgba(0, 0, 0, 0.08), 0 -9px 28px 8px rgba(0, 0, 0, 0.05)
$shadow-2-down := 0px 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0px rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05)
$shadow-2-left := -3px 0 6px -4px rgba(0, 0, 0, .12), -6px 0px 16px 0px rgba(0, 0, 0, 0.08), -9px 0px 28px 8px rgba(0, 0, 0, 0.05)
$shadow-2-right := 3px 0 6px -4px rgba(0, 0, 0, .12), 6px 0px 16px 0px rgba(0, 0, 0, 0.08), 9px, 0px 28px 8px rgba(0, 0, 0, 0.05)

//第 3 层：物体位于高层级，该物体的运动和其他层级没有关联，如：对话框等。
$shadow-3-up := 0 -6px 16px -8px rgba(0, 0, 0, .08), 0 -9px 28px 0px rgba(0, 0, 0, 0.05), 0 -12px 48px 16px rgba(0, 0, 0, 0.03)
$shadow-3-down := 0 6px 16px -8px rgba(0, 0, 0, .08), 0 9px 28px 0px rgba(0, 0, 0, 0.05), 0 12px 48px 16px rgba(0, 0, 0, 0.03)
$shadow-3-left := -6px 0 16px -8px rgba(0, 0, 0, .08), -9px 0 28px 0px rgba(0, 0, 0, 0.05), -12px 0 48px 16px rgba(0, 0, 0, 0.03)
$shadow-3-right := 6px 0 16px -8px rgba(0, 0, 0, .08), 9px 0 28px 0px rgba(0, 0, 0, 0.05), 12px 0 48px 16px rgba(0, 0, 0, 0.03)

$shadow-popper := 0 2px 12px 0 rgba(0, 0, 0, .1);
